<template>
  <main class="os-main">
    <router-view v-slot="{ Component }">
      <transition name="fade"
                  mode="out-in">
        <keep-alive :include="keepList">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </main>
</template>
<script lang="ts">
  import { computed, defineComponent, ref } from 'vue'
  import { ElMain } from 'element-plus'
  import { useStore } from 'vuex'
  export default defineComponent({
    components: {
      'os-main': ElMain,
    },
    setup() {
      const store = useStore()
      // const keeplist = store.getters.getMenusNames
      const keepList = ref<string[]>(['main', 'elements', 'animation', 'maps', 'navigation', 'frontend', 'configure'])
      const marginLeft = computed(() => {
        return store.getters.getShowNavbar ? '215px' : '0px'
      })
      return {
        marginLeft,
        keepList,
      }
    },
  })
</script>
<style lang="scss" scoped>
  @import '@/assets/styles/transitions/fade/fade.scss';
  @include b(main) {
    margin-left: v-bind(marginLeft);
  }
  @include scrollbar;
</style>